<template>
  <div class="label-view">
    <div
      v-if="isSelect"
      class="select-item"
    >
      <div
        class="name-style"
        @click="noselect"
      >
        {{ name }}
      </div>
      <i class="el-icon-check" />
      <div class="right-bottom" />
    </div>
    <div
      v-else
      class="inner"
      @click="select"
    >
      {{ name }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'Label',
  components: {
  },
  props: {
    name: {
      type: String,
      default: '',
    },
    isSelect: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
    };
  },
  methods: {
    noselect() {
      this.$emit('no-select', this.name);
    },
    select() {
      this.$emit('select', this.name);
    },
  },
};
</script>

<style lang="scss" scoped>
  .label-view {
    height: 100%;
    .inner{
      font-size: 11px;
      line-height: 24px;
      cursor: pointer;
      border: 1px solid #cdcdcd;
    }
    .select-item{
      .name-style{
        cursor: pointer;
        font-size: 11px;
        line-height: 24px;
        color: #58A8FE;
        border: 1px solid #58A8FE;
      }
      /deep/ .el-icon-check{
        position: relative;
        top: -16px;
        width: 10px;
        height: 10px;
        font-size: 10px;
        left: 24px;
        color: #fff;
        z-index: 1;
      }
      .right-bottom {
        width: 0;
        height: 0;
        border-bottom: 13px solid #58A8FE;
        border-left: 18px solid transparent;
        position: relative;
        top: -32px;
        left: 42px;
      }

    }
  }
</style>
